<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DNSLOG 平台 - 登录</title>
    <link rel="stylesheet" href="/static/style.css">
</head>

<body>
    <!-- 二进制背景动画 -->
    <div class="binary-bg" id="binaryBg"></div>

    <!-- 矩阵雨效果 -->
    <canvas class="matrix-rain" id="matrixRain"></canvas>

    <div class="container">
        <!-- 登录卡片 -->
        <div class="card" style="max-width: 400px; margin: 100px auto;">
            <h2>🔐 DNSLOG 平台登录</h2>

            <form id="loginForm" class="login-form">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" required class="form-input"
                        autocomplete="username">
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" required class="form-input"
                        autocomplete="current-password">
                </div>

                <button type="submit" class="btn btn-success" style="width: 100%;">
                    <span>🚀</span> 登录系统
                </button>
            </form>

            <div id="loginMessage" class="login-message"></div>

            <div class="login-footer">
                <p>DNSLOG 专业网络安全检测工具</p>
                <!-- <p class="domain-info">域名: {{.Domain}}</p> -->
            </div>
        </div>
    </div>

    <!-- 通知 -->
    <div id="notification" class="notification"></div>

    <style>
        .login-form {
            margin: 20px 0;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #00ff00;
            font-weight: bold;
        }

        .form-input {
            width: 100%;
            padding: 12px;
            background: rgba(0, 10, 0, 0.8);
            border: 1px solid #00ff00;
            color: #00ff00;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
            border-color: #00ffff;
        }

        .login-message {
            margin-top: 15px;
            padding: 10px;
            border-radius: 0;
            text-align: center;
            font-size: 14px;
        }

        .login-message.error {
            background: rgba(255, 0, 0, 0.1);
            border: 1px solid #ff0000;
            color: #ff0000;
        }

        .login-message.success {
            background: rgba(0, 255, 0, 0.1);
            border: 1px solid #00ff00;
            color: #00ff00;
        }

        .login-footer {
            margin-top: 30px;
            text-align: center;
            color: #00ff00;
            opacity: 0.7;
            font-size: 12px;
        }

        .domain-info {
            margin-top: 5px;
            font-family: 'Courier New', monospace;
            background: rgba(0, 20, 0, 0.4);
            padding: 5px 10px;
            border: 1px solid #00ff00;
        }
    </style>

    <script>
        // 矩阵雨效果
        function initMatrixRain() {
            const canvas = document.getElementById('matrixRain');
            const ctx = canvas.getContext('2d');

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            const chars = '01';
            const charArray = chars.split('');
            const fontSize = 14;
            const columns = canvas.width / fontSize;
            const drops = [];

            for (let i = 0; i < columns; i++) {
                drops[i] = 1;
            }

            function draw() {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                ctx.fillStyle = '#00ff00';
                ctx.font = fontSize + 'px monospace';

                for (let i = 0; i < drops.length; i++) {
                    const text = charArray[Math.floor(Math.random() * charArray.length)];
                    ctx.fillText(text, i * fontSize, drops[i] * fontSize);

                    if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                        drops[i] = 0;
                    }

                    drops[i]++;
                }
            }

            setInterval(draw, 33);
        }

        // 二进制背景动画
        function initBinaryBackground() {
            const container = document.getElementById('binaryBg');
            const digits = '01';

            function createDigit() {
                const digit = document.createElement('div');
                digit.className = 'binary-digit';
                digit.textContent = digits[Math.floor(Math.random() * digits.length)];
                digit.style.left = Math.random() * 100 + 'vw';
                digit.style.animationDuration = (Math.random() * 10 + 5) + 's';
                digit.style.opacity = Math.random() * 0.5 + 0.1;
                container.appendChild(digit);

                setTimeout(() => {
                    digit.remove();
                }, parseFloat(digit.style.animationDuration) * 1000);
            }

            setInterval(createDigit, 100);
        }

        // 显示通知
        function showNotification(message, isError = false) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.className = `notification ${isError ? 'error' : ''} show`;

            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }

        // 登录表单处理
        document.getElementById('loginForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const messageDiv = document.getElementById('loginMessage');
            const submitBtn = this.querySelector('button[type="submit"]');

            // 显示加载状态
            submitBtn.innerHTML = '<span>⏳</span> 登录中...';
            submitBtn.disabled = true;
            messageDiv.innerHTML = '';
            messageDiv.className = 'login-message';

            try {
                const response = await fetch('/api/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username, password })
                });

                const data = await response.json();

                if (data.success) {
                    messageDiv.innerHTML = '✅ 登录成功，正在跳转...';
                    messageDiv.className = 'login-message success';
                    showNotification('登录成功');

                    // 延迟跳转让用户看到成功消息
                    setTimeout(() => {
                        window.location.href = '/';
                    }, 1000);
                } else {
                    messageDiv.innerHTML = `❌ ${data.error || '登录失败'}`;
                    messageDiv.className = 'login-message error';
                    showNotification('登录失败', true);
                }
            } catch (error) {
                messageDiv.innerHTML = '❌ 网络错误，请检查连接';
                messageDiv.className = 'login-message error';
                showNotification('网络错误', true);
            } finally {
                // 恢复按钮状态
                submitBtn.innerHTML = '<span>🚀</span> 登录系统';
                submitBtn.disabled = false;
            }
        });

        // 初始化特效
        document.addEventListener('DOMContentLoaded', function () {
            initMatrixRain();
            initBinaryBackground();

            // 自动聚焦用户名输入框
            document.getElementById('username').focus();
        });

        // 窗口调整大小时重置canvas
        window.addEventListener('resize', function () {
            const canvas = document.getElementById('matrixRain');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>

</html>